<template>
  <div class="activity-body">
    <div class="activity-ad"></div>
    <div class="activity-wrap">
      <div class="rule-box ">
        <div class="rule-title">活动声明</div>
        <div class="rule-content">
          <p class="p2">1、活动时间：6月26日09:00-17:00;</p>
          <p class="p2">2、活动期间：<span class="strong">所有用户购买优刃商品满100元，</span>即得“满2000减100”优惠券一张。</p>
        </div>
      </div>
      <div class="rule-box ">
        <div class="rule-title">活动规则</div>
        <div class="rule-content">
          <p class="p2">1、活动期间，购买优刃商品满100元，即可获得“满2000减100”优惠券一张;</p>
          <p class="p2">2、本次活动商品不包含优刃配件;</p>
          <p class="p2">3、优惠券在6月27日完成发放;</p>
          <p class="p2">4、同一客户最多可领取一张优惠券;</p>
          <p class="p2">5、活动时间：2019-06-26 09:00 至 2019-06-26 17:00;</p>
          <p class="p2">6、活动商品不支持退换货;</p>
          <p class="p2">7、最终解释权归刀具联盟所有。</p>
        </div>
      </div>
      <div class="rule-box ">
        <div class="rule-title">关注我们</div>
        <div class="rule-content txt-center">
          <div class="show-img">
            <img src="./img/qrcode.jpg" alt="">
            <p class="p2">刀具联盟微信公众号</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.activity-body{
  background-color: #ffe1e1;
  padding-bottom: 30px;
}
.activity-wrap{
  width: 1020px;
  margin: 0 auto;
  }
.activity-ad{
  width: 100%;
  height: 600px;
  background-image: url("./img/banner.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.rule-box{
  margin-top: 30px;
  border-radius: 6px;
  overflow: hidden;
  .rule-title{
    height: 60px;
    line-height: 60px;
    background-color: #ef2903;
    color: #fff;
    box-sizing: border-box;
    padding-left: 30px;
  }
  .rule-content{
    width: 100%;
    box-sizing: border-box;
    padding: 30px;
    display: inline-block;
    background-color: #fff;
    font-size: 14px;
    .show-img{
      display: inline-block;
      width: 160px;
      height: 160px;
      img{
        width: 100%;
      }
    }
    .p-title{
      display: inline-block;
      vertical-align: top;
      line-height: 30px;
      color: #666666;
    }
    .p-content{
      display: inline-block;
      line-height: 30px;
    }
    .p2{
      color: #666666;
      line-height: 20px;
      margin-bottom: 20px;
      span{
        color:#333333;
      }
      .red{
        font-size: 24px;
        position: relative;
        bottom: -8px;
        color: #CF2121;
      }
    }
    strong{
      font-weight: 500;
      color: #000000;
    }
    .rule-table{
      border: 1px solid #979797;
      margin:7px 0 7px 25px;
      td{
        border: 1px solid #979797;
        line-height: 40px;;
        width: 163px;
        text-align: left;
        padding-left: 10px;
        &:nth-of-type(1){
          padding-left: 0;
          line-height: 20px;
          width: 100px;
          text-align: center;
          div{
            line-height: 10px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
